<template>
  <div class="home-container flex-col">
    <div class="nav-bar">
      <div class="nav-status" :style="{height:statusH + 'px'}"></div>

      <div class="nav-head">
        <img src="/static/assets/img/emr/nav-background.png" class="nav-background" mode="aspectFill"/>
        <div class="nav-content flex-row-space-between">
          <img src="/static/assets/img/emr/icon-back.png" class="icon-back" @click="onClickBack"/>
          <div class="flex-col-v-center title">电子病历</div>
          <div class="icon-back"></div>
        </div>
      </div>
    </div>

    <scroll-view class="home-content flex-1" scroll-y>
      <div class="home-box">
        <div class="mine-info-box flex-col-space-between">
          <div class="top">我的资料</div>
          <div class="bottom flex-row-space-between">
            <div class="left">{{user.nickname}}</div>
            <div class="right flex-row-v-center">
              <div class="btn flex-center" @click="goToEdit">编辑</div>
              <div class="btn flex-center" @click="goToInfo">查看</div>
            </div>
          </div>
        </div>

        <div class="punch-box">
          <div class="top">新打卡</div>
          <div class="card-item flex-col">
            <div class="top flex-row">
              <div class="label">服药</div>
              <div class="imgs flex-1 flex-row">
                <div class="img-item flex-col-center" @click="onTapUploadImg(0, 1)">
                  <block v-if="!fyRecord.imgs[0].img">
                    <img src="/static/assets/img/emr/icon-photo.png"/>
                    <div class="tip">拍照</div>
                  </block>
                  <img v-else class="avatar" :src="fyRecord.imgs[0].img">
                </div>
                <div class="img-item flex-col-center" @click="onTapUploadImg(1, 1)">
                  <block v-if="!fyRecord.imgs[1].img">
                    <img src="/static/assets/img/emr/icon-add.png"/>
                    <div class="tip">上传图片</div>
                  </block>
                  <img v-else class="avatar" :src="fyRecord.imgs[1].img">
                </div>
              </div>
              <div class="btn flex-center" @click="saveRecord(1)">保存</div>
            </div>
            <div class="bottom flex-row-v-center">
              <div class="label">输入详情：</div>
              <input class="flex-1" placeholder="如输入药物：康泰克 服用1粒" placeholder-style="color:#B4B4B4;" v-model="fyRecord.detail"/>
            </div>
          </div>
          <div class="card-item flex-col">
            <div class="top flex-row">
              <div class="label">体温</div>
              <div class="imgs flex-1 flex-row">
                <div class="img-item flex-col-center" @click="onTapUploadImg(0, 2)">
                  <block v-if="!twRecord.imgs[0].img">
                    <img src="/static/assets/img/emr/icon-photo.png"/>
                    <div class="tip">拍照</div>
                  </block>
                  <img v-else class="avatar" :src="twRecord.imgs[0].img">
                </div>
                <div class="img-item flex-col-center" @click="onTapUploadImg(1, 2)">
                  <block v-if="!twRecord.imgs[1].img">
                    <img src="/static/assets/img/emr/icon-add.png"/>
                    <div class="tip">上传图片</div>
                  </block>
                  <img v-else class="avatar" :src="twRecord.imgs[1].img">
                </div>
              </div>
              <div class="btn flex-center" @click="saveRecord(2)">保存</div>
            </div>
            <div class="bottom flex-row-v-center">
              <div class="label">输入详情：</div>
              <input class="flex-1" placeholder="如输入体温36.5℃" placeholder-style="color:#B4B4B4;" v-model="twRecord.detail" />
            </div>
          </div>
          <div class="card-item flex-col">
            <div class="top flex-row">
              <div class="label">医疗器械</div>
              <div class="imgs flex-1 flex-row">
                <div class="img-item flex-col-center" @click="onTapUploadImg(0, 3)">
                  <block v-if="!ylqRecord.imgs[0].img">
                    <img src="/static/assets/img/emr/icon-photo.png"/>
                    <div class="tip">拍照</div>
                  </block>
                  <img v-else class="avatar" :src="ylqRecord.imgs[0].img">
                </div>
                <div class="img-item flex-col-center" @click="onTapUploadImg(1, 3)">
                  <block v-if="!ylqRecord.imgs[1].img">
                    <img src="/static/assets/img/emr/icon-add.png"/>
                    <div class="tip">上传图片</div>
                  </block>
                  <img v-else class="avatar" :src="ylqRecord.imgs[1].img">
                </div>
              </div>
              <div class="btn flex-center" @click="saveRecord(3)">保存</div>
            </div>
            <div class="bottom flex-row-v-center">
              <div class="label">输入详情：</div>
              <input class="flex-1" placeholder="如输入雾化器雾化1次" placeholder-style="color:#B4B4B4;" v-model="ylqRecord.detail"/>
            </div>
          </div>
        </div>

        <div class="punch-record">
          <div class="top flex-row-space-between">
            <div class="left">打卡记录</div>
            <div class="btn flex-center" @click="goToRecord">查看</div>
          </div>
          <div class="bottom flex-col">
            <div class="title flex-row-v-center">
              <div class="col-1 text-center">时间</div>
              <div class="col-2 text-center">类型</div>
              <div class="col-3 text-center">详情</div>
            </div>
            <div class="record-item flex-row-v-center" v-for="item in recordList" :key="item.id">
              <div class="col-1 text-center">{{item.processCreateTime}}</div>
              <div class="col-2 text-center">
                <img :src="item.img_list_arr[0]"/>
                <img v-if="item.img_list_arr.length > 1" :src="item.img_list_arr[1]"/>
              </div>
              <div class="col-3 text-center">{{item.content}}</div>
            </div>
            <div class="no-data flex-center" v-if="recordList.length <= 0">暂无记录</div>
          </div>
        </div>
      </div>
    </scroll-view>
  </div>
</template>

<script>
  import global from "global";
  import Core from "core";
  import Common from "common";

  export default {
    data () {
      return {
        statusH: global.state.statusH,

        isLogin: false,
        user: {},

        ctx: '',
        selectedHospitalCard: {},
        fyRecord: {
          imgs: [
            { img: '' }, { img: '' }
          ],
          detail: ''
        },
        twRecord: {
          imgs: [
            { img: '' }, { img: '' }
          ],
          detail: ''
        },
        ylqRecord: {
          imgs: [
            { img: '' }, { img: '' }
          ],
          detail: ''
        },
        recordList: []
      }
    },

    onLoad () {
      this.ctx = wx.createCameraContext()
      this._getRecordList()
    },

    onShow () {
      this.user = Core.Data.getUser() || {}
      this.isLogin = !!this.user.id;
      this._getHospitalCardList()
    },

    methods: {
      onClickBack () {
        Core.Util.goBack()
      },

      onTapUploadImg (imgType, type) {
        let $this = this
        wx.chooseImage({
          count: 1,
          success: function (res) {
            let tempFilePaths = res.tempFilePaths
            wx.showLoading({
              title: '加载中'
            })
            wx.uploadFile({
              url: Core.Const.NET.FILE_UPLOAD_END_POINT,
              filePath: tempFilePaths[0],
              name: 'file',
              success: function (res) {
                wx.hideLoading()
                if (res.statusCode == 200 && res.data) {
                  let parseData = JSON.parse(res.data)
                  if (type == 1) {
                    $this.fyRecord.imgs[imgType].img = parseData.data.file_url
                  } else if (type == 2) {
                    $this.twRecord.imgs[imgType].img = parseData.data.file_url
                  } else if (type == 3) {
                    $this.ylqRecord.imgs[imgType].img = parseData.data.file_url
                  }
                }
              },
              fail (err) {
                Core.Util.showTip('', err.errMsg)
              }
            })
          },
          fail: function (err) {
            console.error('图片选择失败', err)
          }
        })
      },

        saveRecord (type) {
        let imgList = []
        let content = ''
        if (type == 1) {
          if (this.fyRecord.imgs[0].img) {
            imgList.push(this.fyRecord.imgs[0].img)
          }
          if (this.fyRecord.imgs[1].img) {
            imgList.push(this.fyRecord.imgs[1].img)
          }
          content = this.fyRecord.detail
        } else if (type == 2) {
          if (this.twRecord.imgs[0].img) {
            imgList.push(this.twRecord.imgs[0].img)
          }
          if (this.twRecord.imgs[1].img) {
            imgList.push(this.twRecord.imgs[1].img)
          }
          content = this.twRecord.detail
        } else if (type == 3) {
          if (this.ylqRecord.imgs[0].img) {
            imgList.push(this.ylqRecord.imgs[0].img)
          }
          if (this.ylqRecord.imgs[1].img) {
            imgList.push(this.ylqRecord.imgs[1].img)
          }
          content = this.ylqRecord.detail
        }

        if (imgList.length <= 0) {
          Common.showErrorMsg('请上传图片')
          return
        }

        this._saveRecord(type, imgList.join(','), content)
      },

      goToEdit () {
        if (!this.selectedHospitalCard.hospital_card) {
          Common.go('/pages/我的病历/创建/main?id=' + 0 + '&from=dzbl')
        } else {
          Common.go('/pages/我的病历/创建/main?id=' + this.selectedHospitalCard.hospital_card.id + '&from=dzbl')
        }
      },

      goToInfo () {
        if (!this.selectedHospitalCard.hospital_card) {
          Common.go('/pages/我的病历/创建/main?id=' + 0 + '&from=dzbl')
        } else {
          Common.go('/pages/我的病历资料/main?id=' + this.selectedHospitalCard.hospital_card.id)
        }
      },

      goToRecord () {
        Common.go('/pages/打卡记录/main')
      },

      _getHospitalCardList () {
        Core.Api.HospitalCard.getHospitalCardList()
          .then(res => {
            let hospitalCardList = res.hospital_card_list
            if (hospitalCardList.length) {
              this.selectedHospitalCard = hospitalCardList[0]
            } else {
              this.selectedHospitalCard = {}
            }
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      },

      _getRecordList () {
        Core.Api.HospitalCard.getRecordList()
          .then(res => {
            console.log(res)
            let recordList = res.list
            recordList.forEach(v => {
              v.processCreateTime = Core.Util.timeFormat(v.create_time)
            })
            this.recordList = recordList
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      },

      _saveRecord (type, img, content) {
        Core.Api.HospitalCard.saveRecord(type, img, content)
          .then(res => {
            let typeRecordMap = {
              1: 'fyRecord',
              2: 'twRecord',
              3: 'ylqRecord',
            };
            this[typeRecordMap[type]] = {
              imgs: [
                { img: '' }, { img: '' }
              ],
              detail: ''
            }
            // this.fyRecord = {
            //   imgs: [
            //     { img: '' }, { img: '' }
            //   ],
            //   detail: ''
            // }
            // this.twRecord = {
            //   imgs: [
            //     { img: '' }, { img: '' }
            //   ],
            //   detail: ''
            // }
            // this.ylqRecord = {
            //   imgs: [
            //     { img: '' }, { img: '' }
            //   ],
            //   detail: ''
            // }
            this._getRecordList()
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .btn {
    width:59px;
    height:21px;
    border:1px solid #FF7500;
    border-radius:10px;
    font-size: 14px;
    line-height: 21px;
    font-weight:400;
    color:#FF7500;
    background: #ffffff;
    margin-left: 14px;
  }
  .home-container {
    background: #f9f9f9;
    height: 100vh;
    position: relative;

    .nav-bar {
      height: 68px;
      position: relative;
      z-index: 1;
      .nav-background {
        position: absolute;
        top: 0;
        width: 100%;
        height: 117px;
      }

      .nav-content {
        padding: 10px 12px;
        position: relative;
        z-index: 1;

        .icon-back {
          width: 20px;
          height: 20px;
        }

        .title {
          height: 18px;
          font-size: 19px;
          line-height: 20px;
          color: rgba(49,49,49,1);
        }
      }
    }

    .no-data {
      font-size: 14px;
      color:rgba(49,49,49,1);
      padding: 14px 0;
    }

    .home-content {
      position: relative;
      z-index: 2;
      height: 100%;
      overflow-y: auto;
      .home-box {
        padding: 12px;
        .mine-info-box {
          height: 81px;
          background: rgb(255,255,255);
          box-shadow: 0 1px 7px 0 rgba(8,1,3,0.12);
          border-radius: 10px;
          padding: 14px 20px;
          align-items: initial;

          .top {
            font-size:16px;
            font-weight:bold;
            color:rgba(14,197,169,1);
          }

          .bottom {
            .left {
              font-size:14px;
              font-weight:500;
              color:rgba(49,49,49,1);
            }
          }
        }
        .punch-box {
          margin-top: 15px;
          background: rgb(255,255,255);
          box-shadow: 0 1px 7px 0 rgba(8,1,3,0.12);
          border-radius: 10px;
          padding: 20px 20px 0 20px;
          > .top {
            font-size:16px;
            font-weight:bold;
            color:rgba(14,197,169,1);
          }

          .card-item {
            padding: 21px 0;
            border-bottom: 1px solid rgba(147,147,147,0.22);
            &:last-child {
              border-bottom: none;
            }
            > .top {
              margin-bottom: 21px;
              .label {
                width: 72px;
                font-size:16px;
                color:rgba(49,49,49,1);
              }

              .imgs {
                .img-item {
                  width:59px;
                  height:59px;
                  background:rgba(246,246,246,1);
                  margin-right: 21px;

                  img {
                    width: 29px;
                    height: 29px;
                  }

                  .avatar {
                    width:59px;
                    height:59px;
                  }

                  .tip {
                    margin-top: 4px;
                    font-size: 12px;
                    line-height: 12px;
                    color:rgba(147,147,147,1);
                  }
                }
              }
            }
            > .bottom {
              .label {
                width: 72px;
                font-size:14px;
                color:rgba(147,147,147,1);
              }
              input {
                height:26px;
                background:rgba(249,249,249,1);
                border:1px solid rgba(0, 0, 0, 0.07);
                border-radius:3px;
                font-size:14px;
                color:rgba(180,180,180,1);
                padding: 0 6px;
              }
            }
          }
        }

        .punch-record {
          margin-top: 15px;
          background: rgb(255,255,255);
          box-shadow: 0 1px 7px 0 rgba(8,1,3,0.12);
          border-radius: 10px;
          padding: 20px 20px 0 20px;

          > .top {
            .left {
              font-size:16px;
              font-weight:bold;
              color:rgba(14,197,169,1);
            }
          }

          .col-1 {
            width: 30%;
          }

          .col-2 {
            width: 50%;
            img {
              width: 40px;
              height: 40px;
              margin-right: 10px;
              &:last-child {
                margin-right: 0;
              }
            }
          }

          .col-3 {
            width: 20%;
          }

          > .bottom {
            font-size:14px;
            color: rgb(49,49,49);
            .title {
              padding: 14px 0;
            }
            .record-item {
              padding: 14px 0;
              border-top: 1px solid rgba(147,147,147,0.3);
            }
          }
        }
      }
    }
  }
</style>
